﻿
$(document).ready(function () {
    $('#groupfields ul').hide();
    $('#groupfields ul:first').show();
    $('#grouptab span:first').addClass('current');
    $('#grouptab span a').click(function () {
        // Focus current tab
        $('#grouptab span').removeClass('current');
        $(this).parent().addClass('current');

        // Show current group
        var currentTab = $(this).attr('href');
        $('#groupfields ul').hide();
        $(currentTab).show();

        return false;
    });

    // Lead activity
    $('div.form-table').hide();
    $('div.form-table:first').show();
    $('#groupActivity span:first').addClass('current');
    $('#groupActivity span a').click(function () {
        // Focus current tab
        $('#groupActivity span').removeClass('current');
        $(this).parent().addClass('current');

        // Show current group
        var currentTab = $(this).attr('href');
        $('div.form-table').hide();
        $(currentTab).show();

        return false;
    });

    // Collspan/ Expand
    $('ul.accordeon-tabs li').each(function () {
        $(this).find(".tab").click(function () {
            if ($(this).parent().attr("class") == "open") {
                $(this).parent().removeClass("open");
                $(this).parent().addClass("close");
                $(this).parent().find(".panel").css("display", "none");
            }
            else {
                $(this).parent().removeClass("close");
                $(this).parent().addClass("open");
                $(this).parent().find(".panel").css("display", "block");
            }
        });
    });

    $(".calendar-date").datepicker();
});

// First: Create config
ko.validation.configure({
	registerExtenders: true,
	messagesOnModified: true,
	insertMessages: true,
	parseInputAttributes: true,
	messageTemplate: null,
	decorateElement: true,
	errorClass: "error",
	errorMessageClass: "error-desc"
});

// Second: Create new model to apply to view
var viewModel = new function () {
    // About you
    this.Title = ko.observable().extend({ maxLength: 250 }).extend({ required: { message: "Tên là bắt buộc"} });
    this.ShortDesc = ko.observable();
    this.LongDesc = ko.observable();
    this.ImageURL = ko.observable();
    this.MetaKeywords = ko.observable();
    this.MetaDescription = ko.observable();
    this.Active = ko.observable(true);
    this.NoAcceptPayment = ko.observable(true);

    // Categories
    this.AllCategories = ko.observable(false);
    this.CategoryList = ko.observableArray(data.ListCategory);
    this.CategoryID = ko.observable(data.ListCategory[1].ID);
    this.SubCategoryOptionList = ko.observableArray(data.ListSubCategory);
    this.SubCategoryList = ko.computed(function () {
        var cate = this.CategoryID();
        return ko.utils.arrayFilter(this.SubCategoryOptionList(), function (option) {
            return option.ParentID == cate;
        });
    }, this);

    // State
    this.AllStates = ko.observable(false);
    this.StateList = ko.observableArray(data.ListState);
    this.StateID = ko.observable(data.ListState[1].ID);
    this.DistrictOptionList = ko.observableArray(data.ListDistrict);
    this.DistrictList = ko.computed(function () {
        var state = this.StateID();
        return ko.utils.arrayFilter(this.DistrictOptionList(), function (option) {
            return option.ParentID == state;
        });
    }, this);

    // Payment
    this.PaymentID = ko.observable(data.ListPayment[0].ID);
    this.PaymentList = ko.observableArray(data.ListPayment);

    // Group
    this.GroupList = ko.observableArray(data.ListGroup);
    this.GroupID = ko.observable(data.ListGroup[0].ID);

    // Option
    this.AllOptionList = ko.observableArray(data.ListProductOption);
    this.OptionList = ko.computed(function () {
        var groupId = this.GroupID();
        if (groupId > 0) {
            var list = ko.utils.arrayFilter(this.AllOptionList(), function (option) {
                return option.ProductGroupID == groupId;
            });
            OptionID = list[0].ID;

            return list;
        }
        return this.AllOptionList();
    }, this);
    this.OptionID = ko.computed(function () {
        return this.OptionList()[0].ID;
    }, this);

    // Submit, Next button
    this.InvalidateForm = ko.observable(false);
    this.SubmitForm = function () {
        if (viewModel.errors().length == 0) {
            $('form').submit();
        }
        else {
            viewModel.errors.showAllMessages();
            this.InvalidateForm(true);
        }
    }
};

viewModel.errors = ko.validation.group(viewModel);

// Third: Apply view model to view to handle action when user input data
ko.validation.rules.pattern.message = 'Invalid.';
ko.applyBindings(viewModel, document.getElementById("main"));